<template>
  <div class="banner" :style="style">
    <img :src="src" @load="handleLoad" @error="handlerError" />
  </div>
</template>

<script>

export default {

  name: 'index',

  props: ['height'],

  data() {
    return {
      src: require("@/asset/img/banner.png")
    }
  },

  computed: {
    style: function () {
      if (!this.height) {
        return {}
      }

      if (typeof this.height === 'string') {
        return {
          height: this.height
        }
      } else if (typeof this.height === 'number') {
        return {
          height: `${ this.height }px`
        }
      }

      return {}
    }
  },

  methods: {
    handleLoad: function (e) {
      this.$emit('load', e)
    },

    handlerError: function (e) {
      this.$emit('error', e)
    },
  }

}

</script>

<style lang="less" scoped>

.banner {
  height: 165px;
  position: relative;
  margin-bottom: 5px;
  background: #fff;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

</style>
